<template>
  <div class="header-menu-container">
    <div class="header-menu-item" v-for="item in headerMenu" :key="item.id">
      <Dropdown :label="item.name" :options="item.options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { HeaderMenu } from "./types";
import Dropdown from "../Dropdown/index.vue";
const headerMenu: HeaderMenu[] = [
  {
    id: "1",
    name: "文件",
    options: [
      { label: "新建", value: "new" },
      { label: "打开", value: "open" },
      { label: "保存", value: "save" },
    ],
  },
  {
    id: "2",
    name: "场景",
    options: [
      { label: "新建", value: "new" },
      { label: "打开", value: "open" },
      { label: "保存", value: "save" },
    ],
  },
  {
    id: "3",
    name: "视图",
    options: [
      { label: "新建", value: "new" },
      { label: "打开", value: "open" },
      { label: "保存", value: "save" },
    ],
  },
  { id: "4", name: "窗口", options: [] },
  { id: "5", name: "数据库", options: [] },
  { id: "6", name: "设置", options: [] },
  { id: "7", name: "帮助", options: [] },
];
</script>

<style scoped lang="scss">
.header-menu-container {
  display: flex;
  align-items: center;
}

.header-menu-item {
  margin-right: 10px;
}
</style>
